<template>
	<view class="flex-col page">
		<view class="flex-col group_1">
			<view class="flex-row">
				<text class="text_1">新手机号码</text>
				<input type="input" v-bind:password="false" placeholder="请输入新手机号码" class="text_2" v-model="oldpass" />
			</view>
			<view class="flex-row group_3">
				<text class="text_1">短信验证</text>
				<input type="input" v-bind:password="true" placeholder="请输入验证码" class="text_2" v-model="newpass" />
				<text class="text_3" v-if='showText==true' @click="getYZM">获取验证码</text>
				<view v-else class="send text_3">{{second}}s重新发送</view>
			</view>
			<view class="divider">
				<!--*-->
			</view>
			<view class="flex-col button">
				<view class="section_2" @click="submitPass">
					<text class="text_9">完成</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				oldpass: '',
				newpass: '',
				surenew: '',
				showText: true,
				second: 60,
			};
		},
		methods: {
			...mapActions(['logout']),
			getYZM() {
				if (this.oldpass.length < 11) {
					uni.showToast({
						title: '请填写正确的手机号',
						icon: 'error'
					})
					return;
				}
				this.showText = false;
				var interval = setInterval(() => {
					let times = --this.second
					this.second = times < 10 ? '0' + times : times //小于10秒补 0
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					this.second = 60
					this.showText = true
				}, 60000)
				this.$http('ours.getYZM', {
					phone: this.oldpass
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg
						})
						this.newpass = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				})
			},
			submitPass() {
				if (this.oldpass == '') {
					uni.showToast({
						title: '请输入新手机号码',
						icon: 'error'
					})
					return;
				}
				if (this.newpass == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'error'
					})
					return
				}

				this.$http('common.changePhone', {
					code: this.newpass,
					newPhone: this.oldpass
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '手机号修改成功',
						})
						// 清除token
						this.logout();
						uni.navigateTo({
							url: "/"
						})
					} else {
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					}
				})

			}
		}

	};
</script>

<style scoped lang="css">
	.text_2 {
		width: 281rpx;
		margin-left: 40rpx;
	}

	.group_3 {
		margin-top: 41rpx;
		padding-top: 30rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.page {
		background-color: #ffffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_1 {
		padding: 25.5rpx 0 595rpx 32rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.button {
		margin-top: 187rpx;
		padding-bottom: 6rpx;
		position: relative;
	}

	.text_1 {
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
		width: 180rpx;

	}

	.text-wrapper {
		position: absolute;
		left: 311rpx;
		top: 56rpx;
	}

	.divider {
		margin-top: 42rpx;
		background-color: #eeeeee;
		height: 1rpx;
	}

	.text_3 {
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.section_2 {
		margin-right: 32rpx;
		background-color: #1d6aff;
		border-radius: 60rpx;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.text_9 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_3 {
		/* margin-top: 46rpx; */
		align-self: center;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}
</style>
